<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>发起问题</title>
    <link rel="stylesheet" type="text/css" th:href="@{/css/my.css}"/>
    <link rel="stylesheet" href="webjars/bootstrap/3.3.5/css/bootstrap.min.css" th:href="@{/webjars/bootstrap/3.3.5/css/bootstrap.min.css}"/>
    <link rel="stylesheet" th:href="@{/css/iconfont.css}">
    <link rel="stylesheet" th:href="@{/css/editormd.min.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/css/css.css}"/>
    <script src="webjars/jquery/3.1.1/jquery.min.js" th:src="@{/webjars/jquery/3.1.1/jquery.min.js}"></script>
    <script th:src="@{/js/sweetalert.min.js}"></script>
    <script  th:src="@{/webjars/bootstrap/3.3.5/js/bootstrap.min.js}"></script>
    <script th:src="@{/js/tagsinput.js}" type="text/javascript"></script>
    <script th:src="@{/editormd.js}"></script>
</head>
<body>
<style>
    .main {
        background-color: #fff;
        border-radius: 10px;
        padding-top: 10px;
    }
    .tab-content{overflow: hidden;}
    .my_tag{
        float: left;
        cursor: pointer;
    }
</style>
<!--引入导航条-->
<div th:insert="~{navbar :: navbar}"></div>
<!--内容部分-->
<div class="container main">
    <div class="row">
        <!--左边部分-->
        <div class="col-lg-9 col-md-12 col-sm-12 container-fluid">
            <br>
            <h7><span class="fui-list-thumbnailed"></span>&nbsp;&nbsp;<strong>问题标题</strong></h7>
            <hr>
            <form style="border-top: 1px solid #eee;" id="publish_form">
                <input type="hidden" th:name="id" th:value="${id}">
                <div class="row">
                    <!--标题-->
                    <div class="form-group col-lg-9 col-md-11 col-sm-3">
                        <input type="text" th:value="${title}" class="form-control" th:id="title" name="title" placeholder="标题">
                    </div>
                    <div class="form-group col-lg-3 col-md-2 col-sm-2">
                        <input type="hidden" name="select_val" id="select_val" th:value="${category}">
                        <select type="text" class="form-control" id="category" name="category">
                            <option th:value="0">选择分类</option>
                            <option th:value="1">提问</option>
                            <option th:value="2">分享</option>
                            <option th:value="3">讨论</option>
                            <option th:value="4">建议</option>
                            <option th:value="5">Bug</option>
                        </select>
                    </div>
                </div>
                <!--描述信息-->
                <label for="bs-example-navbar-collapse-1">问题补充 (必填,请参照右侧提示)</label>
                <div id="editor">
                        <textarea style="display:none;" th:text="${description}" th:id="description" name="description" placeholder="填写问题详情信息">
                        </textarea>
                </div>
                <!--<div class="form-group">-->
                    <!--<label for="bs-example-navbar-collapse-1">添加标签</label>-->
                    <!--<input  th:value="${tag}"  class="form-control" th:name="tag" name="tag" id="tagcontent" placeholder="输入标签以 , 分隔">-->
                <!--</div>-->
                <label for="bs-example-navbar-collapse-1">问题标签</label>
                <div class="box">
                    <div class="tagsinput-primary form-group">
                        <input name="tag" id="tagsinputval" class="tagsinput" data-role="tagsinput" th:value="${tag}" placeholder="输入后回车"/>
                    </div>
                </div>
                <!--添加或创建话题-->
               <div th:if="${id==null}" class="topic_wrapper">
                   <label style="float: left;line-height: 30px;" for="bs-example-navbar-collapse-1">添加或创建话题:</label>
                   <div style="display: inline-block" class="box form-group col-lg-3 col-md-2 col-sm-2">
                       <select type="text" class="form-control" id="topic" name="topic">
                           <option th:value="0" selected>默认不选</option>
                           <option th:each="topic:${topiclist}" th:value="${topic.id}" th:text="${topic.title}"></option>
                       </select>
                   </div>
               </div>
                <!--提示信息-->
                <div class="form-group">
                    <input style="float: right; margin-bottom: 100px;" type="button" th:value="发表" class="btn btn-primary btn-default" th:id="publishBtn" onclick="publish()">
                </div>
            </form>

        </div>
        <!--右边部分-->
        <br>
        <div class="col-lg-3 col-md-12 col-sm-12 rightwrapper">
            <strong style="margin-top: 20px;color: #303030;"><span class="iconfont icon-wenti"></span>&nbsp;问题发起指南</strong>
            <hr>
            <small>
                • <strong>问题标题:</strong> 请用准确的语言描述您发布的问题思想。请用精简的语言描述您发布的问题，不超过25字
            </small>
            <br>
            <br>
            <small>
                • <strong>问题补充:</strong>  详细补充您的问题内容, 并提供一些相关的素材以供参与者更多的了解您所要问题的主题思想。
            </small>
            <br>
            <small>
                • <strong>选择标签:</strong>  选择一个或者多个合适的标签，用逗号隔开，每个标签不超过10个字
            </small>
            <br>
            <br>
            <small>
                • <strong>选择话题:</strong>  选择一个或者多个合适的话题, 让您发布的问题得到更多有相同兴趣的人参与. 所有人可以在您发布问题之后添加和编辑该问题所属的话题.
            </small>
        </div>
        </p>

    </div>
</div>
<!--页尾-->
<div th:insert="~{footer :: footer}"></div>

<script type="text/javascript">
    $(function () {
        var editor = editormd("editor", {
            path: "/lib/",  // Autoload modules mode, codemirror, marked... dependents libs path
            width: "100%",
            placeholder: "此处开始编写您要发布的内容...",
            emoji: true,
            taskList: true,
            flowChart: true,             // 开启流程图支持，默认关闭
            //sequenceDiagram: true,       // 开启时序/序列图支持，默认关闭,
            height: "600px",
            delay: 0,
            saveHTMLToTextarea: true, // 保存 HTML 到 Textarea
            toolbarAutoFixed: false,//工具栏自动固定定位的开启与禁用
            syncScrolling: "single",
            imageUpload: true,
            imageFormats: ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
            imageUploadURL: "/question/fileupload",
            //theme : "dark",
            //previewTheme : "dark",
            //editorTheme : editormd.editorThemes['3024-night'],
            watch: false,
        });
        //选中的类型
        var select_val = $("#select_val").val();
        $("#category option[value='" + select_val + "']").attr("selected", "selected");
    })
    function publish() {
        var args = $("#publish_form").serialize();
        var url = "/publish";
        $.post(url, args, function (data) {
            if (data.code == 1000) {
                swal(data.extend.result, "你的问题抛向了太空了~", "success", {
                    buttons: false,
                    timer: 1000,
                })
                .then((value) => {
                    window.location.href = "/"
                  });
            } else {
                if (data.code == "2003") {
                    swal(data.message, data.message, "error", {
                        buttons: false,
                        timer: 1000,
                    }).then((value) => {
                        window.location.href = "/"
                })
                } else {
                    swal(data.message, data.message, "warning");
                }
            }
        })
        return false;
    }

    function addTag(tagname) {
        var preval = $("#tagcontent").val();
        if ("" == preval || preval == null) {
            $("#tagcontent").val(tagname);
        } else {
            if (preval.indexOf(tagname) >= 0) {
                alert("已经包含该标签不能重复添加");
                return false;
            }
            $("#tagcontent").val(preval + "," + tagname);
        }
    }
</script>
</body>
</html>